// pages/category/index.js
import {request} from "../../request/request.js"
Page({

    /**
     * 页面的初始数据
     */
    data: {
        /* 左侧的菜单数据 */
        leftMenuList:[],
        /* 右侧的商品数据 */
        rightContent:[],
        currentIndex:0,
        scrollTop:0
        
    },
    Cates:[],

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        /* 发送请求之前要判断本地存储是否有旧的数据
            {time:Date.now() , data:[]}
           1.没有旧数据 发送新请求
           2.有旧数据 且没过期 就用本地存储的旧数据
           以Sync（同步，同时）结尾的都是都是同步缓存，二者的区别是，异步不会阻塞当前任务，同步缓存直到同步方法处理完才能继续往下执行。
           通俗点说,异步就是不管保没保存成功,程序都会继续往下执行.同步是等保存成功了,才会执行下面的代码.
           使用异步,性能会更好;而使用同步,数据会更安全
           一般都使用同步，异步是为了用户体验的情况而选择，同步相对简单。*/

        /* 先获取本地存储中的数据 */
        const Cates=wx.getStorageSync("Cates");
        if(!Cates){
            this.getCates();
        }else{
            // 有旧数据 定义过期时间
            if(Date.now() - Cates.time>1000*10) {
                this.getCates()
            }
            else{
                // 这里真没想到要加data。。（time ， data）
                this.Cates=Cates.data
                let left_menuList = this.Cates.map(v=>v.cat_name)
            // 构造右侧的商品数据
                let right_content = this.Cates[0].children

                this.setData({
                    leftMenuList:left_menuList,
                    rightContent:right_content
                })
            }

        }
    },
    async getCates(){
        // request({
        //     url:"/categories"
        // }).then(res => {
        //     this.Cates=res.data.message
        //     wx.setStorageSync("Cates", {time:Date.now(),data:this.Cates});
        //     // 为什么Cates在data里是读取不出来的,放在data外面才读的出来
        //     // console.log(this.Cates)
        //     // 构造左侧的菜单数据 这里没懂
        //     let left_menuList = this.Cates.map(v=>v.cat_name)
        //     /* var a = [ 
        //         'Hydrogen', 
        //         'Helium', 
        //         'Lithium', 
        //         'Beryl­lium' 
        //         ];
        //         //获取每个元素的长度，组成一个数组，方法1
        //         var b = a.map(function(s){return s.length});
        //         //方法2
        //         var c = a.map(s => s.length) */
        //     // 构造右侧的商品数据
        //     let right_content = this.Cates[0].children

        //     this.setData({
        //         leftMenuList:left_menuList,
        //         rightContent:right_content
        //     })
        // })
        // 使用es7发送异步请求
        const res=await request({url:"/categories"})
        this.Cates=res.data.message
        wx.setStorageSync("Cates", {time:Date.now(),data:this.Cates});
            // 构造左侧的菜单数据
            let left_menuList = this.Cates.map(v=>v.cat_name)
            /* var a = [ 
                'Hydrogen', 
                'Helium', 
                'Lithium', 
                'Beryl­lium' 
                ];
                //获取每个元素的长度，组成一个数组，方法1
                var b = a.map(function(s){return s.length});
                //方法2
                var c = a.map(s => s.length) */
            // 构造右侧的商品数据
            let right_content = this.Cates[0].children
            this.setData({
                leftMenuList:left_menuList,
                rightContent:right_content
            })
    },
    handleItemTap(e){
        /*1. 获取被点击的标题身上给的索引
            2. 给data中的currentIndex赋值 */
            /* target是事件触发的真实元素 currentTarget是事件绑定的元素
            事件处理函数中的this指向是中为currentTarget currentTarget和target
            有时候是同一个元素，有时候不是同一个元素 （因为事件冒泡）
            当事件是子元素触发时，currentTarget为绑定事件的元素，target为子元素 */
        const {index} = e.currentTarget.dataset
        let right_content = this.Cates[index].children
        this.setData({
            currentIndex:index,
            rightContent:right_content,
            // 重新设置右侧内容的scroll-view距离顶部
            scrollTop:0
        })


    }
    
})